<template>
	<button v-bind="$attrs" @click="clickHandler" class="button" hover-class="touch" :class="{ghost,[`${size}`]:size}">
		<slot />
	</button>
</template>
<script setup>
	import { nextTick, ref } from 'vue'
	defineProps(['ghost','size'])
	const emit = defineEmits(['click'])
	const canClick = ref(true)
	const clickHandler = async(...arg) => {
		if(canClick.value){
			canClick.value = false
			await nextTick()
			emit('click',...arg)
			setTimeout(()=>{
				canClick.value = true
			},1000)
		}
	}
</script>
<style lang="scss" scoped>
	.button{
		background-color: $uni-color-primary;
		margin:$uni-spacing-col-base;
		color: #fff;
		padding:0;
		line-height:normal;
		font-size: 32rpx;
		padding:20rpx 0;
		overflow: inherit;
		&.min{
			font-size:21rpx;
			padding:5rpx 20rpx;
			display:inline-block;
			border-radius:$uni-border-radius-base;
			margin:0;
		}
		&.middle{
			font-size:24rpx;
			padding:14rpx 32rpx;
			border-radius:$uni-border-radius-base;
			margin:0;
		}
		&.ghost{
			background: #fff;
			color: $uni-color-primary;
			&:after{
				border-color: $uni-color-primary;
				width:200%;
				height:200%;
				box-sizing: border-box;
			}
		}
		&.touch{
			background-color: darken($uni-color-primary,10%);
		}
	}
</style>